<!--企业库-->
<template>
  <div class="page">
    <div class="top">
      <div class="top-search">
        <div class="top-search-item">
          <el-button type="primary" @click="addDialog">新增</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="danger">删除</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="primary">编辑</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="primary">现场风险点</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="primary">导出Excel文件</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="success">保存</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="primary">生成报告</el-button>
        </div>
        <div class="top-search-item">
          <el-button type="primary">设置</el-button>
        </div>
        <div class="top-search-item">
          <el-input placeholder="请输入企业名称关键字检索" />
        </div>
        <div class="top-search-item">
          <el-button type="primary">检索</el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            label="序号"
          />
          <el-table-column
            align="center"
            label="企业名称"
          />
          <el-table-column
            align="center"
            label="企业简称"
          />
          <el-table-column
            align="center"
            label="负责人"
          />
          <el-table-column
            align="center"
            label="联系电话"
          />
          <el-table-column
            align="center"
            label="经纬度"
          />
          <el-table-column
            align="center"
            label="涉爆粉尘"
          >
            <template slot-scope="scope">
              <div>
                <el-checkbox v-model="scope.row.checked" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="有限空间"
          >
            <template slot-scope="scope">
              <div>
                <el-checkbox v-model="scope.row.checked" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="有危险化学品"
          >
            <template slot-scope="scope">
              <div>
                <el-checkbox v-model="scope.row.checked" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="本年度防雷检测"
            width="120"
          >
            <template slot-scope="scope">
              <div>
                <el-checkbox v-model="scope.row.checked" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="所在行业"
          />
          <el-table-column
            align="center"
            label="企业类型"
          />
          <el-table-column
            align="center"
            label="地址"
          />
          <el-table-column
            align="center"
            label="企业简介"
          />
          <el-table-column
            align="center"
            label="备注"
          />
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div class="bottom">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="表1 特种作业人员清单" name="first">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="名字"
              />
              <el-table-column
                align="center"
                label="作业类别"
              />
              <el-table-column
                align="center"
                label="证件号"
              />
              <el-table-column
                align="center"
                label="有效日期"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表2 特种设备作业人员清单" name="second">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="姓名"
              />
              <el-table-column
                align="center"
                label="作业类别"
              />
              <el-table-column
                align="center"
                label="证件号"
              />
              <el-table-column
                align="center"
                label="有效日期"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表3 特种设备一览表" name="third">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="设备名称"
              />
              <el-table-column
                align="center"
                label="规格型号"
              />
              <el-table-column
                align="center"
                label="数量"
              />
              <el-table-column
                align="center"
                label="单位"
              />
              <el-table-column
                align="center"
                label="备注"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表4 危险化学品清单" name="fourth">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="化学品名称"
              />
              <el-table-column
                align="center"
                label="CAS登记号"
              />
              <el-table-column
                align="center"
                label="存在场所"
              />
              <el-table-column
                align="center"
                label="数量"
              />
              <el-table-column
                align="center"
                label="单位"
              />
              <el-table-column
                align="center"
                label="备注"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表5 工业气体清单" name="five">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="工业气体名称"
              />
              <el-table-column
                align="center"
                label="CAS登记号"
              />
              <el-table-column
                align="center"
                label="存在场所"
              />
              <el-table-column
                align="center"
                label="数量"
              />
              <el-table-column
                align="center"
                label="单位"
              />
              <el-table-column
                align="center"
                label="备注"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表6 爆炸品清单" name="six">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="爆炸品名称"
              />
              <el-table-column
                align="center"
                label="CAS登记号"
              />
              <el-table-column
                align="center"
                label="存在场所"
              />
              <el-table-column
                align="center"
                label="数量"
              />
              <el-table-column
                align="center"
                label="单位"
              />
              <el-table-column
                align="center"
                label="备注"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="表7 剧毒品清单" name="seven">
          <div class="top-search">
            <div class="top-search-item">
              <el-button type="primary">新增</el-button>
            </div>
            <div class="top-search-item">
              <el-button type="danger">删除</el-button>
            </div>
          </div>
          <div class="content">
            <el-table
              ref="multipleTable"
              :data="tableData1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                align="center"
                label="序号"
              />
              <el-table-column
                align="center"
                label="剧毒品名称"
              />
              <el-table-column
                align="center"
                label="CAS登记号"
              />
              <el-table-column
                align="center"
                label="存在场所"
              />
              <el-table-column
                align="center"
                label="数量"
              />
              <el-table-column
                align="center"
                label="单位"
              />
              <el-table-column
                align="center"
                label="备注"
              />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--新增示例-->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="企业名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input />
          </el-form-item>
          <el-form-item label="经纬度">
            <el-input />
          </el-form-item>
          <el-form-item label="涉爆粉尘">
            <el-switch v-model="form.isFC" />
          </el-form-item>
          <el-form-item label="有限空间">
            <el-switch />
          </el-form-item>
          <el-form-item label="有危险化学品">
            <el-switch />
          </el-form-item>
          <el-form-item label="本年度防雷检查">
            <el-switch />
          </el-form-item>
          <el-form-item label="所在行业">
            <el-input />
          </el-form-item>
          <el-form-item label="地址">
            <el-input />
          </el-form-item>
          <el-form-item label="企业简介">
            <el-input />
          </el-form-item>
          <el-form-item label="备注">
            <el-input />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          checked: true
        }
      ],
      multipleSelection: [],
      currentPage: 1,
      activeName: 'first',
      tableData1: [],
      dialogVisible: false,
      form: {
        name: '',
        isFC: false
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    addDialog() {
      this.dialogVisible = true
    },
    onSubmit() {
      console.log('submit!')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top {
    width: 100%;
    height: 30rem;

    .top-search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;

      .top-search-item {
        margin-right: 1rem;
      }
    }

    .content {
      margin-top: 2rem;
      width: 100%;
      height: 20rem;
    }
  }

  .bottom {
    width: 100%;
    height: 20rem;
    .top-search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: row;

      .top-search-item {
        margin-right: 1rem;
      }
    }

    .content {
      margin-top: 1rem;
      height: 10rem;
    }
  }
}

</style>
